<template>
  <div class="fly-panel fly-column">
    <div class="layui-container">
      <ul>
        <router-link to="/" tag="li" class="layui-hide-xs">
          <a href="/">首页
          </a>
        </router-link>
        <router-link v-for="(item, index) in lists" :key="'panel' + index"  tag="li" :to="item.path">
          <a href="">
            {{ item.name }}
            <span class="layui-badge-dot" v-if="item.isNew"></span>
          </a>
        </router-link>
        
        <li class="layui-hide-xs"><span class="line"></span></li>
        <li class="layui-hide-xs layui-hide-sm"><a href="">我发表的贴</a></li>
        <li class="layui-hide-xs layui-hide-sm"><a href="">我收藏的帖</a></li>
      </ul>
      <div class="right layui-hide-xs ">
        <span class="layui-icon layui-icon-search"></span>
        <a href="" class="layui-btn">发表新帖</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "panel",
  data() {
    return {
      lists: [
        {
          name: "分享",
          path: "/index/share",
          isNew: false,
        },
        {
          name: "讨论",
          path: "/index/discuss",
          isNew: true,
        },
        {
          name: "建议",
          path: "/index/advise",
          isNew: false,
        },
        {
          name: "公告",
          path: "/index/notice",
          isNew: false,
        },
        {
          name: "动态",
          path: "/index/logs",
          isNew: false,
        }
      ]
    };
  }
};
</script>

<style lang="scss">
@media (max-width: 768px) {
  .panel {
    height: auto !important;
  }
  ul {
    li {
      width: 33.2%;
    }
  }
}

.panel {
  position: relative;
  height: 50px;
  line-height: 50px;
  margin-bottom: 15px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
ul {
  li {
    display: inline-block;
    a {
      padding: 0 20px;
    }
  }
  .line {
    display: inline-block;
    height: 15px;
    width: 1px;
    background-color: #e2e2e2;
    vertical-align: middle;
    margin: 0 20px;
  }
}
.right {
  position: absolute;
  right: 0;
  top: 0;
  .layui-icon-search {
    margin-right: 10px;
    font-size: 20rpx;
    &:hover {
      color: #5fb878;
      cursor: pointer;
    }
  }
}
</style>
